<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>08监听事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .images {
            width: 500px;
            height: 400px;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="demo">
        <h1>炭治郎 {{ismoves}}</h1>
        <button @click="skill">切换呼吸</button>
        <div class="images">
            <img :src="images" alt="">
        </div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
      const vm =  new Vue({
            el: '#demo',
            data: {
                moves: "true",
                images: "../images/9C2B610143896FE3828C09DB1390E85A.png"
            },
            methods: {
                skill() {
                    this.moves = !this.moves
                }
            },
            computed: {
                ismoves() {
                    return this.moves ? '水之呼吸' : '日之呼吸';
                }

            },
            // watch:{
            //     moves:{
            //         handler(newValue,oldValue){
            //             if(newValue) this.images = '../images/9C2B610143896FE3828C09DB1390E85A.png'
            //             else this.images = '../images/52299341D0982CD635B0C6D48FD7BC6B.png'      
            //         }
            //     }
            // }
        })
            vm.$watch('moves', {
                handler(newValue, oldValue) {
                    if (newValue) this.images = '../images/9C2B610143896FE3828C09DB1390E85A.png'
                    else this.images = '../images/52299341D0982CD635B0C6D48FD7BC6B.png'
               }
          })
      
    </script>
</body>

</html>